<template>
  <div class="header-wrapper">
    <div class="header">
      <div class="header-left">
        <ul class="link-box">
          <li class="item" :class="{'selected':selected==='Expert'}" @click="$router.push('/Expert/')"><a
              href="javascript:;" class="nav-link">选专家</a></li>
          <li class="item" :class="{'selected':selected==='Team'}" @click="$router.push('/Team/')"><a
              href="javascript:;" class="nav-link">选设计团队</a></li>
        </ul>
      </div>
      <div class="header-center"> 现场指挥部专家及设计资源库</div>
      <div class="header-right">
        <ul class="link-box">
          <li class="item"><a href="javascript:;" class="nav-link" @click="doLoginOut">退出</a></li>
          <li class="item" :class="{'selected':selected==='Admin'}" @click="$router.push('/Admin/SystemBasicData')"
              v-if="$store.state.user.permission >= 3"><a href="javascript:;" class="nav-link">后台管理</a></li>
          <li class="item" :class="{'selected':selected==='UserCenter'}" @click="$router.push('/UserCenter/')"><a
              href="javascript:;" class="nav-link">用户中心</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: ['selected'],
  created() {
    this.$store.commit('me')
  },
  methods: {
    doLoginOut: function () {
      this.$store.commit("doLogout")
      this.$router.push("/Home")
    },
  },
}
</script>

<style scoped>
.header-wrapper {
  width: 100%;
  height: 70px;
  min-width: 1180px
}

.header-wrapper .header {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 6px 0 hsla(0, 0%, 81.2%, .44);
  z-index: 1000
}

.header-wrapper .header .link-box {
  display: flex;
  justify-content: flex-start;
  align-items: center
}

.header-wrapper .header .link-box .item {
  margin: 0 10px;
  white-space: nowrap;
  position: relative;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  cursor: pointer
}

.header-wrapper .header .link-box .item .nav-link {
  color: #7f7f7f;
  display: block;
  font-size: 16px;
  transition: all .2s;
  font-weight: 700
}

.header-wrapper .header .link-box .selected .nav-link {
  font-size: 24px;
  color: #4c93cf
}

.header-wrapper .header .link-box .item:after {
  content: "";
  background-color: #4c93cf;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  border-radius: 2px;
  transition: all .4s;
  width: 0
}

.header-wrapper .header .link-box .item:hover:after, .header-wrapper .header .link-box .selected:after {
  width: 40px
}

.header-wrapper .header .link-box .item:hover .nav-link {
  color: #4c93cf
}

.header-wrapper .header .header-center {
  color: #7f7f7f;
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  overflow: hidden;
  height: 70px;
  line-height: 70px
}
</style>